<template>
    <div>
        <el-tag v-for="(tag, i) in tabledata[row]?.tags2" :key="tag" class="mx-1" closable :disable-transitions="false"
            @close="tabledata[row]?.tags2.splice(i, 1)">
            {{ label.find(t => t.ID === tag)?.name }}
        </el-tag>
        <el-button v-show="tabledata[row]?.tags2?.length < 4" class="button-new-tag ml-1" size="small"
            @click="dialogVisible = true">
            + 标签
        </el-button>
        <el-dialog append-to-body v-model="dialogVisible" title="选择知识点" width="840px"
            :before-close="() => dialogVisible = false">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    选择知识点
                </span>
            </template>
            <selectlabelVue :max="4" v-model:label="setlabel"></selectlabelVue>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { assign } from 'lodash-es';
import { computed, ref } from 'vue';
import Studycodemodel from '../../mysql_interface/studycodemodel';
import selectlabelVue from '../selectlabel/index.vue';
const p = defineProps<{ tabledata: any; row: any, label: Studycodemodel.ILabel[] }>()
const dialogVisible = ref(false)



const setlabel = computed<number[]>({
    get() {
        return p.tabledata[p.row]?.tags2 || []
    },
    set(v) {
        console.log(v)
        if (p.tabledata[p.row]?.tags2) {
            p.tabledata[p.row].tags2 = v
        } else {
            p.tabledata[p.row] = assign(p.tabledata[p.row], { tags2: v })
        }

    }
})

</script>